---
type: tutorial
title: Combine layouts para conseguir o melhor de ambos os mundos
description: |-
  Tutorial: Construa seu primeiro blog Astro —
  Adicione seu layout de página básico ao layout que formata suas postagens do blog
i18nReady: true
---
import Blanks from '~/components/tutorial/Blanks.astro';
import Box from '~/components/tutorial/Box.astro';
import Checklist from '~/components/Checklist.astro';
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

Agora que você adicionou um layout para cada postagem do blog, é hora de fazer suas postagens parecerem com o resto das páginas no seu website!

<PreCheck>
  - Aninhar seu layout de postagem do blog dentro do seu layout de página principal
</PreCheck>

## Aninhe seus dois layouts

Você já tem um `BaseLayout.astro` para definir o layout geral da suas páginas. 

`MarkdownPostLayout.astro` te dá templates adicionais para propriedades comuns de postagens do blog como um `title` e `date`, mas suas postagens do blog não se parecem com as outras páginas no seu site. Você pode corresponder a aparência das suas postagens do blog com o resto do seu site ao **aninhar layouts**.

<Steps>
1. Em `src/layouts/MarkdownPostLayout.astro`, importe `BaseLayout.astro` e o utilize para envolver todo o conteúdo do template. Não se esqueça de passar a prop `pageTitle`:

    ```astro title="src/layouts/MarkdownPostLayout.astro" ins={2,5,12}
    ---
    import BaseLayout from './BaseLayout.astro';
    const { frontmatter } = Astro.props;
    ---
    <BaseLayout pageTitle={frontmatter.title}>
      <h1>{frontmatter.title}</h1>
      <p>{frontmatter.pubDate.toString().slice(0,10)}</p>
      <p><em>{frontmatter.description}</em></p>
      <p>Escrito por: {frontmatter.author}</p>
      <img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} />
      <slot />
    </BaseLayout>
    ```

2. Verifique a pré-visualização do seu navegador `http://localhost:4321/posts/post-1`. Agora você deve ver conteúdo renderizado pelo:

    - Seu **layout de página principal**, incluindo seus estilos, links de navegação e rodapé de redes sociais.
    - Seu **layout de postagem do blog**, incluindo propriedades frontmatter como a descrição, data, título e imagem.
    - Seu **conteúdo Markdown individual da postagem do blog**, incluindo apenas o texto escrito na postagem.

3. Note que o título da sua página agora é mostrado duas vezes, uma por cada um dos layouts.

    Remova a linha que mostra o título da sua página de `MarkdownPostLayout.astro`:

    ```astro title="src/layouts/MarkdownPostLayout.astro" del={2}
    <BaseLayout pageTitle={frontmatter.title}>
      <h1>{frontmatter.title}</h1>
      <p>{frontmatter.pubDate.slice(0,10)}</p>
      <p><em>{frontmatter.description}</em></p>
      <p>Escrito por: {frontmatter.author}</p>
      <img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} />
      <slot />
    </BaseLayout>
    ```

4. Verifique sua pré-visualização do navegador novamente em `http://localhost:4321/posts/post-1` e cheque que essa linha não é mais mostrada e seu título é mostrado apenas uma vez. Faça quaisquer outros ajustes necessários para garantir que você não tenha nenhum conteúdo duplicado.
</Steps>


  Certifique-se de que:

    - Cada postagem do blog mostra o mesmo template de página, e nenhum conteúdo está faltando. (Se está faltando conteúdo em uma das suas postagens do blog, verifique suas propriedades do frontmatter.)

    - Nenhum conteúdo é duplicado em uma página. (Se algo está sendo renderizado duas vezes, então certifique-se de removê-lo de `MarkdownPostLayout.astro`.)

    Se você quiser customizar seu template de página, você pode.



<Box icon="question-mark">

### Teste seu conhecimento

1. Isso te permite aninhar um layout dentro de outro e se aproveitar trabalhando com peças modulares.

    <MultipleChoice>
      <Option>
        deployment contínuo
      </Option>
      <Option>
        design responsivo
      </Option>
      <Option isCorrect>
        design baseado em componentes
      </Option>
    </MultipleChoice>

2. Múltiplos layouts são particularmente úteis para projetos que contém páginas Markdown, como um...

    <MultipleChoice>
      <Option isCorrect>
        blog
      </Option>
      <Option>
        painel de controle
      </Option>
      <Option>
        aplicativo de conversa
      </Option>
    </MultipleChoice>

3. Qual destes fornece templates para todas as suas páginas?

    <MultipleChoice>
      <Option>
        `index.astro`
      </Option>
      <Option isCorrect>
        `BaseLayout.astro`
      </Option>
      <Option>
        `post-1.md`
      </Option>
    </MultipleChoice>
</Box>

<Box icon="check-list">

## Checklist

<Checklist>
- [ ] Eu posso aninhar layouts, verificando por quaisquer elementos duplicados.
</Checklist>
</Box>

### Recursos

- [Aninhando Layouts no Astro](/pt-br/basics/layouts/#aninhando-layouts)
